import { Modal, Button } from "antd";
import "./index.css";
import { useState } from "react";
import pageOne from "./components/pageone";
import pageTwo from "./components/pagetwo";
import pageThree from "./components/pagethree";
pageThree;
function Popup(props: any) {
  const { title, show, ok, cancel } = props;
  let [nowid, setnowid] = useState(1);
  let [pageData, setPage] = useState([
    { id: 1, component: pageOne },
    { id: 2, component: pageTwo },
    { id: 3, component: pageThree },
  ]);
  function changeNowId(id: number) {
    console.log(id);
    setnowid(id);
  }
  return (
    <>
      <Modal
        title={title}
        open={show}
        centered
        width={800}
        keyboard={true}
        wrapClassName={"web"}
        onCancel={() => {
          changeNowId(1);
          cancel()
        }}
        footer={
          nowid !== 1 && (
            <div>
              <Button
                type="link"
                onClick={() => {
                  changeNowId(1);
                //   nowid === 1 && cancel();
                }}
              >
                取消
              </Button>
              <Button onClick={() => ok({ id: 1 })} type="primary">
                <label style={{ color: "#fff" }}>添加设备</label>
              </Button>
            </div>
          )
        }
      >
        <div className="modal-main">
          {pageData &&
            pageData.map((item) => {
              if (item.id === nowid) {
                return (
                  <item.component
                    key={item.id}
                    changeAc={changeNowId}
                  ></item.component>
                );
              }
            })}
        </div>
      </Modal>
    </>
  );
}

export default Popup;
